<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
        body,
        html {
            font-size: 12px;
            margin: 0;
        }

        article {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            height: 130px;
            width: 350px;
            margin: auto;

        }

        fieldset {
            border: 0;
            margin: 0;
            padding: 0;
        }

        header {
            display: flex;
            flex-direction: row;
        }

        section {
            margin-left: 20px;
        }

        input[type=text],
        input[type=password],
        input[type=checkbox],
        button {
            margin-top: 10px;
        }

        .align-right {
            text-align: right;
        }

        @media screen and (max-width: 480px) {
            article {
                height: 42rem;
                width: 100vw;
                overflow: hidden;
            }

            header {
                display: block;
            }

            aside {
                text-align: center;
            }

            img {
                border-radius: 7.5rem;
                margin-bottom: 1rem;
            }

            label {
                display: none;
            }

            .show {
                display: inline;
                line-height: 2.5rem;
                vertical-align: 1rem;
            }

            section {
                margin-left: 0;
            }

            input[type=text],
            input[type=password],
            button {
                width: 100%;
                height: 2.5rem;
                margin-top: 0.4rem;
            }

            input[type=checkbox] {
                height: 2.5rem;
                margin-top: 0.4rem;
            }

            .align-right {
                text-align: center;
            }
        }
    </style>
</head>

<body>
    <article>
        <header>
            <aside style="margin-top:10px;">
                <div style="border-radius: 20px;border:1px solid #ccc;">
                    <img src="images/login_logo.jpg" alt="带墨镜的小孩" title="带墨镜的小孩">
                </div>
            </aside>
            <section>
                <fieldset>
                    <legend hidden>用户登录</legend>
                    <form action="http://localhost:3000/users/login" method="get" id="myForm">
                        <label for="userName">用户名：</label><input type="text" id="userName" name="userName"
                            placeholder="请输入用户名"><br>
                        <label for="password">密&nbsp;&nbsp;&nbsp;码：</label><input type="password" id="password"
                            name="password" placeholder="请输入密码"><br>
                        <input type="checkbox" name="cookie" id="cookie" value="on">
                        <label class="show" for="cookie">&nbsp;一周之内不用登录</label>
                        <nav class="align-right">
                            <button type="submit" formaction="user?param=register">注册</button>
                            <button type="submit">登录</button>
                        </nav>
                    </form>
                    <input form="myForm" type="hidden" name="hiddenName" value="session">
                </fieldset>
            </section>
        </header>
        <footer class="align-right">
            <a href="mailto:thelongestday.yhf@gamilc.com" style="margin-right: 17px;">联系我</a>
        </footer>
    </article>
</body>

</html>
<script>
    document.getElementById("userName").addEventListener("keydown", event => {
        if (event.keyCode == 13) {
            event.preventDefault();   //当表单中，只有一个文本框的时候，在文本框中回车，即为提交。此时，终止提交。
            event.target.nextElementSibling.nextElementSibling.focus();//事件源的节点的下一个兄弟节点的下一个兄弟节点获取焦点。
        }
    }, false);
</script>